<style lang="scss" scoped="">
  @import '../style.scss';


</style>
<template>

  <div class='my_card_outer_b' style="height:50vh;">
    <div class='my_card_b' style="height:48vh;" >
      <div class="my_card_title_b">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>租户各维度分数占比
      </div>
      <div style="height:43vh;" ref="myEchart">


      </div>
    </div>

  </div>

</template>

<script>
  import echarts from 'echarts'
  import config from '../config.js'
  export default {
    name:'b_diff_dim_score_ratio',
    watch: {
      test: function(val, oldVal) {

        this.initChart(val)
      }
    },
    computed: {
      test() {
        return this.$store.state.selected_tenant;
      }
    },
    mounted() {
      if (this.$store.state.general_data!=0){
        this.initChart(this.$store.state.general_data);
      }

    },
    methods:{
      initChart(input_data){
        let hv=document.body.clientHeight/100;
        var myChart= echarts.init(this.$refs.myEchart);
// 				let data=[
// 					[10,40,31,31,54],
// 					[10,60,41,31,34],
// 					[15,70,61,51,64],
// 					[10,40,31,11,44],
// 					[10,40,11,21,54]
// 				]

				let data=[
					input_data.dim_score_ratio.util,
					input_data.dim_score_ratio.reason,
					input_data.dim_score_ratio.economy,
					input_data.dim_score_ratio.tech,
					input_data.dim_score_ratio.strategy
				]


				var option=getOption();
// 				var sum_cal=[0,0,0,0,0]
// 				for (var key in 	data){
// 					for(var i =0;i<5;i++){
// 						sum_cal[i]=sum_cal[i]+data[key][i]
// 					}
//
// 				}

				for (var index in 	option.series){


					for (var j in 	data){
						option.series[index]['data'][j]=100*data[j][index];

					}
				}
        myChart.setOption(option, true);
      }
    },

  }


	function getOption(){
		let hv = document.body.clientHeight / 100;
		var option = {
		  tooltip : {
		    trigger: 'axis',
		    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		    }
		  },

		  grid: {
		    show:false,
		    left: '3%',
		    right: '4%',
		    bottom: '2%',
		    top:'4%',
		    containLabel: true
		  },
		  xAxis : [
		    {
		      type : 'category',

					data : ['资源利用','资源分配','经济产值','科技产值','战略意义'],
					axisLabel:{
					  color:"#000",
					  fontSize:hv*2
					},
		    }
		  ],
		  yAxis : [
		    {
		      type : 'value',
		      axisTick : {show: false},
		      splitLine:false,

		    }
		  ],
		  series : [
		    {
		      name:'0-40分',
		      type:'bar',
					stack: 'barbar',

					itemStyle:{
						color:config.color[1]
					},
		      data:[86, 67, 87,87,80]
		    },
		    {
		      name:'40-60分',
		      type:'bar',
		      stack: 'barbar',
		      itemStyle:{
		      	color:config.colork['orange']
		      },
		      data:[43, 57, 87,34,90]
		    },
		    {
		      name:'60-80分',
		      type:'bar',
					stack: 'barbar',
		      itemStyle:{
		      	color:config.colork['blue']//
		      },
		      data:[43, 47, 87,54,90]
		    },
				{
				  name:'80-90分',
				  type:'bar',
					stack: 'barbar',
				  itemStyle:{
				  	color:config.color[0]
				  },
				  data:[43, 47, 87,54,90]
				},
				{
				  name:'90-100分',
				  type:'bar',
					stack: 'barbar',
				  itemStyle:{
				  	color:config.colork['grass']
				  },
					barWidth:'40%',
				  data:[43, 47, 87,54,90]
				}
		  ]
		};
		return option;

	}
</script>

